<template>
	<view class="content" v-if="show==1">
		<view class="goods4">
			<view class="orders" style="width:100%;">
				<view style="width:100%;display: flex;">
				<image :src="goods.teacher.avatar" mode="aspectFit" class="touxiang"></image>
				<view class="goods4-2">
					<view class="goods4-3">
						<view class="fenlei">{{goods.cate2}}</view>
						<view class="nianji">{{zdtype==1?'㉿':'￥'}}{{goods.price}}</view>
					</view>
					<view class="goods4-3">
						<view class="zhuangtai" style="width:100%;">S{{goods.teacher_id}}-{{goods.teacher.nickname}}</view>
						
					</view>
					<view class="goods4-3">
						<view class="zhuangtai" style="width:100%;">{{goods.nianji}}</view>
					</view>
					<view class="goods4-3">
						<view class="zhuangtai" style="width:100%;">{{goods.fwcate}}</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	
		<view class="fenge"></view>
		<view class="detail">
		  <view class="detail_2">
		    <text class="ti2"><text>*</text>联系人</text>
		    <input class="shuru"@input="lianxiren" type="text" placeholder="请输入姓或姓名先生/女士">
		  </view>
		  <!--<view class="detail_2">
		    <text class="ti2"><text>*</text>联系电话</text>
		    <input class="shuru" @input="lianxidianhua" type="number" placeholder="请输入常用手机号">
		  </view>-->
		  <view class="detail_2">
		    <text class="ti2"><text>*</text>您的地址</text>
		    <input class="shuru" disabled="true" :value="weizhi" @click="weizhi2" type="text" placeholder="您可以按需选择定位地址">
		  </view>
		  <view class="detail_2">
		    <text class="ti2"><text style="color:#fff;">*</text>详细地址</text>
		    <input class="shuru" @input="dizhi" type="text" placeholder="请输入详细地址,小区/楼号/门牌号等">
		  </view>
		  <view class="detail_2">
		    <text class="ti2"><text>*</text>上门日期</text>
			<picker mode="date" @change="qwsktime" :value="sktime" :start="startDate">
				<text class="zhuzhu" v-if="!sktime">请选择您需求的上门日期</text>
				<text v-else>{{sktime}}</text>
			</picker>
			<image src="../../static/xiaxia.png" mode="aspectFill" class="xiaxia"></image>
		  </view>
		  <view class="detail_2">
		    <text class="ti2"><text>*</text>订单数量</text>
		  	<view class="info3">
		  		<view class="jingyan" @click="jian">-</view>
		  		<view class="jingyan2">{{keshi}}</view>
		  		<view class="jingyan3" @click="jia">+</view>
		  	</view>
		  </view>
		</view>
		<view class="fenge"></view>
	
	  <view class="detail">
	    <view class="detail_1">
	      <text class="ti">总金额</text>
	      
	      <text class="xuan">{{zdtype==1?'㉿':'￥'}}{{goods_money}}</text>
	    </view>
	    <view class="detail_1" @click='yhq2' v-if="keshi>0">
	      <text class="ti">优惠券</text>
	      <image src="../../static/right_2.png" mode='widthFix'></image>
	      <text class="xuan" v-if="is_yhq==1">{{ymoney}}</text>
		  <text class="xuan" v-if="is_yhq==0">暂无可用优惠券</text>
	    </view>
	
	  </view>
	
	  <view class="bottom">
	    <text class="heji">需支付：</text>
	    <text class="money2">{{zdtype==1?'㉿':'￥'}}{{total_money}}</text>
	    <view class="pay" @click="pay">确认下单</view>
	  </view>
	
	
	  <!--优惠券选择开始-->
	  <view class="zheceng2" v-if="yhq == true"></view>
	  <view class="yhq" v-if="yhq == true">
	    <view class="yhq_1">选择优惠券
	      <image src="../../static/cha.png" mode='widthFix' @click='yhq2' ></image>
	    </view>
	    <view class="you">
			<view :class="yid==0?'you_1 active':'you_1'" @click="xyhq" data-index="-1">
			  <view class="money" style="width:90%;">不使用优惠券</view>
			  
			  <view class="xuan2">
				<image src="../../static/duihao2.png" v-if="yid==0" mode='widthFix'></image>
			</view>
			</view>
	      <view :class="yid==y.id?'you_1 active':'you_1'" v-for="(y,index) in youhuiquan" @click="xyhq" :data-index="index">
	        <view class="money">{{zdtype==1?'㉿':'￥'}}{{y.money}}</view>
	        <view class="tiaojian">
	          <view class="tiaojian_1">满{{y.total}}可用</view>
	          <view class="tiaojian_2">截止{{y.etime}}</view>
	        </view>
	        <view class="xuan2">
				<image src="../../static/duihao2.png" v-if="yid==y.id" mode='widthFix'></image>
			</view>
	      </view>
	
	    </view>
	  </view>
	  <!--优惠券选择结束-->
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				id: 0,
				show:0,
				showPicker: false,
				uid:0,
				startDate:'',
				yhq:false,
				goods:[],
				youhuiquan:[],
				yhqs:[],
				yid:0,
				zdtype:0,
				ymoney:'请选择要使用的优惠券',
				is_yhq:0,
				total_money:0,
				goods_money:0,
				weizhi:'',
				lng:0,
				lat:0,
				shijian:[],
				amount:1,
				sj:[0,0],
				name:'',
				mobile:'',
				address:'',
				sktime:'',
				kindex:0,
				keshi:1
			}
		},
		onLoad(op) {
			if(app.isBlank(op.id)==true){
				app.error_msg("缺少参数");
			}else{
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					app.error_msg("请先登录");
				}
				var that=this;
				//#ifdef APP-PLUS
				uni.getSystemInfo({
				    success: function (res) {
						if(res.platform=='ios'){
							//that.zdtype=1;
						}
				    }
				});
				//#endif
				this.id=op.id;
				this.uid=uid;
				this.getdata();
			}
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				
				uni.request({
				    url: app.globalData.url+"goods/order",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:that.uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						that.startDate=res.data.data.day;
						that.goods=res.data.data.goods;
						//that.youhuiquan=res.data.data.youhuiquan;
						that.yhqs=res.data.data.youhuiquan;
						that.total_money=res.data.data.goods.price;
						that.goods_money=res.data.data.goods.price;
						that.is_yhq=res.data.data.is_yhq;
						
						var yhq=res.data.data.youhuiquan;
						
						var y=new Array();
						var n=0;
						for(var i=0;i<yhq.length;i++){
							if(yhq[i].total<=that.total_money){
								y[n]=yhq[i];
								n++;
							}
						}
						that.youhuiquan=y;
						if(app.isBlank(y)==true){
							that.is_yhq=0;
						}else{
							that.is_yhq=1;
						}
						
						that.show=1;
				    }
				});
			},
			jian(){
				if(this.keshi<=1){
					this.keshi=1;
				}else{
					this.keshi--;
				}
				this.shuliang();
			},
			jia(){
				this.keshi++;
				this.shuliang();
			},
			pay(){
				var that=this;
				if(app.isBlank(this.name)==true){
					uni.showToast({
					    title: "请输入联系人",
						icon:'none',
					    duration: 1000
					});
					return false;
				}
				/*if(app.isBlank(this.mobile)==true){
					uni.showToast({
					    title: "请输入联系电话",
						icon:'none',
					    duration: 1000
					});
					return false;
				}*/
				if(app.isBlank(this.weizhi)==true){
					uni.showToast({
					    title: "请选择您的位置",
						icon:'none',
					    duration: 1000
					});
					return false;
				}
				/*if(app.isBlank(this.address)==true){
					uni.showToast({
					    title: "请输入详细地址",
						icon:'none',
					    duration: 1000
					});
					return false;
				}*/
				if(app.isBlank(this.sktime)==true){
					uni.showToast({
					    title: "请选择上门日期",
						icon:'none',
					    duration: 1000
					});
					return false;
				}
				uni.showLoading({
				    title: '请求中'
				});
				
				uni.request({
				    url: app.globalData.url+"goods/buy",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:that.uid,yid:that.yid,name:that.name,mobile:that.mobile,weizhi:that.weizhi,lng:that.lng,lat:that.lat,address:that.address,sktime:that.sktime,amount:that.keshi},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						uni.redirectTo({
						    url: '/pages/goods/pay?id='+res.data.data.id
						});
				    }
				});
			},
			weizhi2(){
				var that=this;
				if(this.lng>0 && this.lat>0){
					uni.chooseLocation({
						latitude:that.lat,
						longitude:that.lng,
					    success: function (res) {
							that.weizhi=res.address;
							that.lng=res.longitude;
							that.lat=res.latitude;
					    }
					});
				}else{
					uni.chooseLocation({
						success: function (res) {
							that.weizhi=res.address;
							that.lng=res.longitude;
							that.lat=res.latitude;
						}
					});
				}
			},
			qwsktime: function(e) {
				this.sktime=e.detail.value;
			},
			lianxiren(e){
				this.name = e.target.value
			},
			lianxidianhua(e){
				this.mobile = e.target.value
			},
			dizhi(e){
				this.address = e.target.value
			},
			xyhq(e){
				var index=e.currentTarget.dataset.index;
				if(index==-1){
					this.yid=0;
					this.ymoney="请选择要使用的优惠券";
					var total_money=this.keshi*this.goods.price;
					this.total_money=total_money.toFixed(2);
				}else{
				this.yid=this.youhuiquan[index].id;
				this.ymoney="-"+this.youhuiquan[index].money;
				var total_money=this.goods.price*this.keshi-this.youhuiquan[index].money;
				this.total_money=total_money.toFixed(2);
				}
				this.yhq=false;
			},
			shuliang: function() {
				var total_money=this.keshi*this.goods.price;
				this.total_money=total_money.toFixed(2);
				this.goods_money=total_money.toFixed(2);
				
				var yhq=this.yhqs;
				
				var y=new Array();
				var n=0;
				for(var i=0;i<yhq.length;i++){
					if(yhq[i].total<=this.total_money){
						y[n]=yhq[i];
						n++;
					}
				}
				this.youhuiquan=y;
				if(app.isBlank(y)==true){
					this.is_yhq=0;
				}else{
					this.is_yhq=1;
				}
				this.yid=0;
				this.ymoney="请选择要使用的优惠券";
			},
			yhq2: function () {
				if(this.is_yhq==0){
					return false;
				}
			    this.yhq=!this.yhq;
			},
			DatePicker(){
				this.showPicker = true;
			},
			ed(e) {//选择
				this.showPicker = false;
				if(e) {
					this.sktime=e.value;
				}
			}
		}
	}
</script>

<style>
	.jingyan4{width:30px;height:30px;line-height: 30px;text-align: center;margin-top: 7.5px;float: left;}
	.jingyan3{width:30px;height:30px;line-height: 30px;text-align: center;background-color: #f4f4f4;border-top-right-radius: 3px;border-bottom-right-radius: 3px;margin-top: 7.5px;float: left;font-size: 1.2rem;}
	.jingyan2{width:50px;height:30px;line-height: 30px;text-align: center;background-color: #f4f4f4;margin-top: 7.5px;float: left;margin-left: 1px;margin-right: 1px;}
	.jingyan{width:30px;height:30px;line-height: 30px;text-align: center;background-color: #f4f4f4;border-top-left-radius: 3px;border-bottom-left-radius: 3px;margin-top: 7.5px;float: left;font-size: 1.2rem;}
	
	
	.jubaocause4-2{width:100px;height:35px;line-height: 35px;background-color: #05c160;color:#fff;text-align: center;float: right;margin-top: 14px;border-radius: 3px;}
	.jubaocause4-1{width:100px;height:35px;line-height: 35px;background-color: #ccc;color:#fff;text-align: center;float: left;margin-top: 14px;border-radius: 3px;}
	.jubaocause4{width:90%;margin: 0 auto;height:50px;overflow: hidden;}
	.jubaocause3 textarea{width:94%;height:140px;font-size: 0.85rem;color:#333;line-height: 24px;padding: 5px 3%;}
	.jubaocause3{width:90%;height:150px;background-color: #f8f8f8;border-radius: 3px;margin: 0 auto;}
	.jubaocause2 image{width:20px;height:20px;float: right;margin-top: 10px;}
	.jubaocause2 text{font-weight: 550;}
	.jubaocause2{width:90%;margin: 0 auto;height:40px;overflow: hidden;line-height: 40px;}
	.jubaocause{width:300px;height:250px;position: fixed;top:50%;margin-top: -125px;left:50%;margin-left: -150px;background-color: #fff;z-index: 9999;border-radius: 5px;}
	
	.weizhi2{width:100%;height:25px;line-height: 25px;flex:1;overflow: hidden;}
	.weizhi image{width:15px;height:15px;margin-top: 5px;}
	.weizhi{width:100%;height:25px;display: flex;}
	.touxiang{width:100px;height:100px;margin-right: 10px;border-radius: 5px;}
	.ti2 text{color:red;}
	.ti2{line-height: 45px;width:80px;font-weight: 550;color:#333;}
	.detail_2{width:94%;padding: 0px 3%;height:45px;border-bottom: 1px rgb(245, 245, 245) solid;overflow: hidden;display: flex;}
	.shuru{height:45px;padding-left: 10px;font-size: 0.85rem;width:100%;flex:1;}
	.fenge{width:100%;height:5px;background-color: #f5f5f5;}
	.goods{width:100%;padding-bottom: 10px;}
	.count{width:94%;padding:0px 3%;height:40px;line-height: 40px;color:#666;border-bottom: 1px rgb(245, 245, 245) solid;}
	.goods_1{width:94%;padding: 0px 3%;overflow: hidden;margin-top: 10px;display: flex;}
	.img{width:120px;height:80px;margin-right: 8px;}
	.img image{width:120px;height:80px;border-radius: 3px;}
	.title{width:100%;flex:1;}
	.biao{width:100%;height:30px;line-height: 30px;overflow: hidden;font-size: 0.9rem;}
	.guige{width:100%;height:25px;line-height: 25px;color:#999;font-size: 0.8rem;overflow: hidden;}
	.price{width:100%;height:25px;line-height: 25px;color:red;}
	.amount{width:15%;float: left;text-align: center;color:#999;line-height: 25px;}
	.amount text{font-size: 0.6rem;margin-right: 3px;}
	.detail{width:100%;}
	.zhuzhu{color:grey;}
	.detail_2 picker{height:45px;line-height: 45px;flex:1;padding-left: 10px;font-size: 0.85rem;}
	.detail_1{width:94%;padding: 0px 3%;height:45px;border-bottom: 1px rgb(245, 245, 245) solid;overflow: hidden;}
	.ti{color:#666;line-height: 45px;float: left;}
	.xuan{color:#999;line-height: 45px;float: right;}
	.detail_1 image{width:15px;margin-top: 15px;float: right;}
	.beizhu{width:100%;height:45px;line-height: 45px;color:#666;}
	.detail_1 textarea{width:94%;padding:8px 3%;height:44px;line-height: 22px;background-color:rgb(245, 245, 245);border-radius: 3px;color:#666; }
	.bottom{width:94%;padding:0px 3%;height:50px;border-top:1px rgb(245, 245, 245) solid;position: fixed;bottom: 0px;z-index: 9990;background-color: #fff;overflow: hidden;}
	.heji{color:#666;line-height: 50px;float: left;}
	.money2{color:red;line-height: 50px;float: left;}
	.pay{width:100px;height:34px;line-height: 34px;text-align: center;color:#fff;border-radius: 20px;margin-top: 8px;float: right;background-color: #05c160;}
	
	.goods44{width:100%;overflow: hidden;}
	.goods4-9{width:100%;height:22px;line-height: 22px;color:#fe2424;overflow: hidden;font-size: 0.8rem;}
	.goods4-8 text{color:#666;font-size: 0.8rem;}
	.goods4-8{width:100%;height:22px;line-height: 22px;overflow: hidden;font-size: 0.8rem;}
	.goods4-7{width:70%;height:44px;float: left;}
	
	.goods4-4{width:30%;height:44px;float: left;line-height: 44px;text-align: center;color:#fe2424;font-size: 1.5rem;}
	.guanjianci{width:100%;height:25px;line-height: 25px;overflow: hidden;font-size: 0.8rem;}
	.zhuangtai{width:60%;height:25px;line-height: 25px;float: left;overflow: hidden;font-size: 0.8rem;}
	.shengfen{width:40%;height:25px;line-height: 25px;overflow: hidden;float: left;text-align: right;font-size: 0.8rem;}
	.nianji{width:30%;height:25px;line-height: 25px;text-align: right;float: left;color:red;}
	.fenlei{width:70%;height:25px;line-height: 25px;overflow: hidden;font-weight: 600;font-size: 0.9rem;float: left;}
	.goods4-3{width:100%;overflow: hidden;}
	.goods4-2{width:100%;flex: 1;}
	.goods4-1{width:120px;height:80px;border-radius: 5px;margin-right: 10px;}
	.goods4{width:94%;padding: 0px 3%;border-radius: 5px;display: flex;position: relative;background-color: #fff;margin: 8px 0px;}
	
	
	.zheceng2{width:100%;height:100vh;background-color: #000;opacity: 0.5;position: fixed;bottom: 0px;z-index:9995;}
	.yhq{width:100%;min-height: 100px;background-color: #fff;position: fixed;bottom: 0px;z-index: 9999;}
	.yhq_1{width:100%;height:40px;line-height: 40px;text-align: center;border-bottom: 1px rgb(245, 245, 245) solid;position: relative;}
	.yhq_1 image{width:15px;position: absolute;top:10px;right:10px;}
	.you{width:100%;max-height: 60vh;overflow: auto;}
	.you_1{width:96%;margin: 10px 2%;background-color: rgb(248, 143, 23);height:44px;border-radius: 5px;overflow: hidden;padding: 3px 0px;}
	.money{width:30%;float: left;line-height: 44px;font-size: 1.2rem;color:#fff;text-align: center;}
	.tiaojian{width:60%;float: left;}
	.tiaojian_1{width:100%;line-height: 22px;color:#fff;}
	.tiaojian_2{width:100%;line-height: 22px;color:#fff;}
	.xuan2{width:10%;float: left;height:44px;text-align: center;}
	.xuan2 image{width:18px;margin-top: 13px;}
	.active{background-color: #05c160!important;}
</style>
